import React, { Component } from 'react'

export default class LifeCycle extends Component {
  constructor(props){
    super(props)
    this.state={
      title:props.title,
      count:0
    }
  }
  changeTitle=()=>{
    this.setState(()=>{
      return{
        title:'计数器演示',
      }
    })
  }
  shouldComponentUpdate(nextProps,nextState){
    console.log('shouldComponentUpdate',this.state.title+"----------------->"+nextState.title);

    return true
  }
  //组件的挂载阶段
  componentDidMount(){
   this.timers=setInterval(() => {
     console.log('------走起来--------');
      this.setState(()=>{
        return{
          count:this.state.count+1
        }
      },()=>{
        console.log('count',this.state.count);
      })
    }, 1000);    
  }
  componentDidUpdate(){
    console.log('-------componentDidUpdate---------');
    console.log('componentDidUpdate->title',this.state.title);
  }
  componentWillUnmount(){
    console.log('--------componentWillUnmount-------------');
    //定时器的停止
    clearInterval(this.timers)
  }
  render() {
    console.log('-------render---------');
    console.log('render-->title',this.state.title);
    return (
      <div>
        <h1>{this.state.title}</h1>
        <h2>{this.state.count}</h2>
        <button onClick={this.changeTitle}>更改</button>
      </div>
    )
  }
}
